<template>
	<view>
		<view class="top-msg">请上传真实数据，确保图片清晰，避免影响运费结算</view>
		<view>
			<form>
				<view class="upload-photo">
					<label>上传图片</label>
					<view class="upload-btn" @click="uploadQualificationImage">
						<view v-if="!formData.qualificationImage" class="upload-icon-wrapper">
							<view class="upload-icon2">
								<image src="/photo/driver-autnentication/camera-upload.png"
									style="width: 50rpx; height: 50rpx;">
								</image>
							</view>
						</view>
						<view class="upload-btn uploaded" v-else>
							<image :src="formData.qualificationImage" class="upload-icon" />
							<view class="close-btn" @click.stop="removeQualificationImage">×</view>
						</view>
					</view>
					<view class="bangdan">
						磅单图片
					</view>
				</view>
				<view class="form-item">
					<label>进站时间</label>
					<view class="input-wrapper">
						<uni-datetime-picker v-model="formData.time" :minDate="getCurrentDate()"
							@change="handleTimeChange" />
					</view>
				</view>
				<view class="form-item">
					<label>卸车毛量</label>
					<view class="input-wrapper">
						<input class="no-border-input" type="text" v-model="formData.mao" placeholder="请输入12~49"
							required />
						<text>吨</text>
					</view>
				</view>
				<view class="form-item">
					<label>卸车皮量</label>
					<view class="input-wrapper">
						<input class="no-border-input" type="text" v-model="formData.pi" placeholder="请输入12~49"
							required />
						<text>吨</text>
					</view>
				</view>
				<view class="clear-weight">
					<text>净重：</text>
					<text>{{ formData.unloadsum }}</text>
					<text>&nbsp;&nbsp;&nbsp;吨</text>
				</view>
				<!-- 下一步按钮，点击触发 connect 方法 -->
				<button class="bt_connect" hover-class="hover-class-1" @click="connect">提交</button>
			</form>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		http
	} from '@/config/requst.js';
	//引入拦截器
	import '@/config/requst.js'
	import {
		tokenStore
	} from "@/stores/token";
	//创建一个空对象，用于存放页面中的数据
	const formData = ref({});
	// 创建一个响应式对象 formData，用于存储表单数据
	// const formData = ref({
	//   // 身份证号初始为空
	//   time: '',
	//   // 持卡人姓名初始为空
	//   mao: '',
	//   // 银行卡号初始为空
	//   pi: '',
	//   // 净重初始为空
	//   weight: '',
	//   // 图片路径初始为空
	//   qualificationImage: ''
	// });

	// 获取当前时间的方法，格式化为 uni-datetime-picker 所需的格式
	const getCurrentDate = () => {
		const now = new Date();
		const year = now.getFullYear();
		const month = String(now.getMonth() + 1).padStart(2, '0');
		const day = String(now.getDate()).padStart(2, '0');
		const hour = String(now.getHours()).padStart(2, '0');
		const minute = String(now.getMinutes()).padStart(2, '0');
		return `${year}-${month}-${day} ${hour}:${minute}`;
	};

	// 上传磅单图片
	const uploadQualificationImage = () => {
		wx.chooseImage({
			count: 1,
			success(res) {
				formData.value.qualificationImage = res.tempFilePaths[0]; // 获取并存储资格证图片路径
				console.log("上传磅单图片", res);
				uni.uploadFile({
					url: 'http://192.168.0.31:8080/drive/upload', // 请确保这是正确的后端地址
					filePath: formData.value.qualificationImage, // 文件路径
					name: 'file', // 文件字段名
					formData: {
						'user': 'test' // 表单数据
					},
					header: {
						'Authorization': tokenStore().token // 携带token
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes.data); // 打印上传成功返回的数据
						let i = JSON.parse(uploadFileRes.data);
						console.log(i)
						formData.value.poundimg = i.shuju;
					},
					fail: (err) => {
						console.error('上传失败:', err); // 打印上传失败错误信息
					}
				});
			},
			fail(err) {
				console.log("上传装车图片2失败", err);
			}
		});
	};

	// 删除磅单图片
	const removeQualificationImage = () => {
		formData.value.qualificationImage = '';
	};

	// 处理时间选择变化
	const handleTimeChange = (e) => {
		if (e) {
			formData.value.unloadtime = e;
		} else {
			console.error('事件对象格式不正确，无法获取选择的时间值');
		}
	};

	// 提交表单
	const connect = () => {
		if (!formData.value.unloadtime || !formData.value.mao || !formData.value.pi || !formData.value
			.qualificationImage) {
			wx.showToast({
				title: '请填写所有必填项',
				icon: 'none'
			});
			return;
		}


		// 定义格式化函数
		const formatTime = (date) => {
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			const hour = String(date.getHours()).padStart(2, '0');
			const minute = String(date.getMinutes()).padStart(2, '0');
			return `${year}-${month}-${day} ${hour}:${minute}`;
		};

		// if (formattedSelectedTime > formattedCurrentTime) {
		//   wx.showToast({
		//     title: '选择的时间不能早于当前时间',
		//     icon: 'none'
		//   });
		//   return;
		// }

		// 将毛重和皮重转换为数字类型
		const mao = parseFloat(formData.value.mao);
		const pi = parseFloat(formData.value.pi);

		// 校验毛重是否大于皮重
		if (isNaN(mao) || isNaN(pi) || mao <= pi) {
			wx.showToast({
				title: '毛量必须大于皮量',
				icon: 'none'
			});
			return;
		}

		// 计算净重
		formData.value.unloadsum = (mao - pi).toFixed(2);
		//向后端发送请求,修改表中的数据
		xg()
	};
	//向后端发送请求,修改表中的数据
	const xg = async () => {
		const res = await http({
			url: "/orders/upddd",
			method: 'POST',
			data: formData.value
		})
		console.log(111)
		if (res.code == 20031) {
			uni.showToast({
				title: '提交成功',
				icon: 'none',
			});
			uni.navigateTo({
				url: '/pages/xieche/xieche'
			})
		}
	}
	onLoad((obj) => {
		//当首次进入页面的时候，将用户的id和这个商品的id存放变量car中
		formData.value.id = obj.id
		console.log(formData.value)
	})
</script>

<style lang="scss" scoped>
	/*----------------------------顶部提示信息样式-------------------------------*/
	.top-msg {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: red;
		text-align: center;
		background-color: rgba(255, 0, 0, 0.3);
	}

	/* -------------------------上传图片容器样式-------------------------------- */
	.upload-photo {
		padding: 30rpx;
	}

	.upload-btn {
		margin: 20rpx;
		width: 43%;
		height: 180rpx;
		background-color: #f1f1f1;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: relative;
	}

	.upload-icon-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 100%;
		position: relative;
	}

	.upload-icon {
		width: 300rpx;
		height: 300rpx;
		background-size: cover;
		/* 保证图片完全覆盖框，并保持长宽比 */
		border-radius: 10rpx;
	}

	.uploaded {
		position: relative;
	}

	.close-btn {
		position: absolute;
		top: 5rpx;
		right: -60rpx;
		width: 40rpx;
		height: 40rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		font-size: 28rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10;
	}

	/* -----------------------------榜单图片文字样式--------------------------------- */
	.bangdan {
		margin-top: -20rpx;
		margin-left: 120rpx;
		font-size: 28rpx;
	}

	/* ------------------------------------表单样式--------------------------------- */
	/* 表单表头样式  添加左外边距  距离手机边框的距离 */
	.form-item {
		/* 设置表单项距离手机边框的左外边距 */
		margin-left: 20rpx;
		/* 使用 flex 布局，使表单标签和输入框水平排列并垂直居中 */
		display: flex;
		align-items: center;
		/* 设置表单项之间的底部外边距 */
		margin-bottom: 15rpx;
		//视图容器底部边框  提高可视性
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		padding-bottom: 10rpx;
	}

	.form-item label {
		/* 设置表单标签的宽度 */
		width: 150rpx;
	}

	.input-wrapper {
		/* 使用 flex 布局，使输入框和图标水平排列并垂直居中 */
		display: flex;
		align-items: center;
		/* 使输入框和图标在容器内均匀分布 */
		justify-content: space-around;
	}

	/* 为表单输入框添加样式 */
	.no-border-input {
		/* 去除输入框获得焦点时的外边框 */
		outline: none;
		/* 设置输入框的宽度 */
		width: 500rpx;
		/* 设置输入框的高度 */
		height: 80rpx;
	}

	/* 按钮样式 */
	.bt_connect {
		/* 设置按钮文字颜色为白色 */
		color: white;
		/* 设置按钮宽度为 80% */
		width: 80%;
		/*设置按钮的圆角半径 */
		border-radius: 50rpx;
		/* 设置按钮的背景颜色，使用半透明蓝色 */
		background-color: rgba(1, 66, 244, 0.3);
	}

	/* 按钮的点击效果 */
	.hover-class-1 {
		/* 点击时按钮向下偏移 3rpx */
		top: 3rpx;
		/* 点击时按钮背景颜色变为深蓝色 */
		background-color: #002fa7;
	}

	/* ----------------------净重文字以及盒子样式---------------------------- */
	.clear-weight {
		width: 100%;
		height: 400rpx;
		line-height: 400rpx;
		text-align: center;
	}
</style>